<template>
  <el-form
    ref="item"
    v-loading="loading"
    :model="item"
    class="demo-ruleForm"
    label-width="120px"
    :rules="rules"
  >
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="16">
        <el-form-item label="企业名称：" prop="companyName">
          <el-input v-model="item.companyName" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="客户级别：" prop="level">
          <el-select
            v-if="createDicsObj.COMPANY_LEVEL"
            v-model="item.level"
            class="select"
            placeholder="客户级别"
          >
            <el-option
              v-for="item in createDicsObj.COMPANY_LEVEL.children"
              :key="item.dicCode"
              :label="item.dicName"
              :value="item.dicCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="行业：" prop="industry">
          <el-select
            v-if="createDicsObj.COMPANY_INDUSTRY"
            v-model="item.industry"
            class="select"
            placeholder="行业信息"
          >
            <el-option
              v-for="item in createDicsObj.COMPANY_INDUSTRY.children"
              :key="item.dicCode"
              :label="item.dicName"
              :value="item.dicCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-left: 10px;">
      <el-form-item label="省份：">
        <el-select
          v-model="item.provinceCode"
          class="select"
          placeholder="请选择"
          @change="changeProCode"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          />
        </el-select>
        <el-select
          v-if="citys"
          v-model="item.cityCode"
          class="select"
          placeholder="请选择"
          @change="changeProCode"
        >
          <el-option
            v-for="item in citys"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          />
        </el-select>
        <el-select v-if="countys" v-model="item.countyCode" class="select" placeholder="请选择">
          <el-option
            v-for="item in countys"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          />
        </el-select>
      </el-form-item>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="公司法人：" prop="legalPerson">
          <el-input v-model="item.legalPerson" style="width:202px;" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="电话：" prop="telephone">
          <el-input v-model="item.telephone" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="所属部门:" prop="orgId">
          <Department
            style="width:322px;"
            :tree-data="treeData"
            :default-props="defaultProps"
            :input-val="item.orgName"
            @emitData="emitData"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="邮政编码：" prop="postalCode">
          <el-input v-model="item.postalCode" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="传真：" prop="fax">
          <el-input v-model="item.fax" style="width:202px;" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="公司网址：" prop="officialWebsite">
          <el-input v-model="item.officialWebsite" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="总人数：" prop="totalNumber">
          <el-input v-model="item.totalNumber" style="width:202px;" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="注册资金(万元)：" prop="registeredCapital">
          <el-input v-model="item.registeredCapital" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="成立年限：">
          <el-date-picker
            v-model="item.years"
            value-format="yyyy"
            style="width:202px;"
            type="year"
            placeholder="选择年"
            format="yyyy"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="销售额(万元)：" prop="salesVolume">
          <el-input v-model="item.salesVolume" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1030px;">
      <el-col :span="8">
        <el-form-item label="详细地址：">
          <el-input v-model="item.address" style="width:202px;" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="16">
        <el-form-item label="备注：">
          <el-input
            v-model="item.remark"
            resize="none"
            show-word-limit
            type="textarea"
            rows="3"
            maxlength="1000"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="width:1000px;">
      <el-col :span="16">
        <el-form-item style="textAlign:center;marginTop:30px;">
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
const result = '';
const resultArr = []
function reducerArr1(arr) {
  arr.map(v => {
    resultArr.push(v)
    if (v.children) {
      reducerArr1(v.children)
    }
  })
}
import ElSel from '~/components/commom/el_Select';
import Department from '~/components/commom/department';
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
import regular from '~/utils/regular';
export default {
  components: {
    Department
  },
  props: ['id'],
  data() {
    return {
      isEditor: this.$props.id === 'create',
      editor: this.$props.id === 'create',
      loading: true,
      treeData: [],
      item: {
        countyCode: '',
        countyName: '',
        provinceCode: '',
        cityCode: '',
        cityName: '',
        companyName: '',
        legalPerson: '',
        industry: '',
        level: '',
        provinceName: '',
        cityName: '',
        countyName: '',
        telephone: '',
        orgId: '',
        postalCode: '',
        orgName: '',
        fax: '',
        officialWebsite: '',
        totalNumber: '',
        registeredCapital: '',
        years: '',
        salesVolume: '',
        remark: ''
      },
      defaultProps: { children: 'children', label: 'orgName' },
      dics: [],
      createDicsObj: {},
      countys: [],
      citys: [],
      province: '',
      city: '',
      county: '',
      companyName: '',
      provinceList: [],
      countyList: [],
      cityList: [],
      canChangeProCode: true,
      rules: {
        companyName: regular.require50,
        level: regular.requireChange,
        industry: regular.requireChange,
        salesVolume: regular.sale,
        legalPerson: regular.require2,
        telephone: regular.notMob,
        totalNumber: regular.number,
        registeredCapital: regular.sale,
        fax: regular.fax,
        officialWebsite: regular.internet,
        postalCode: regular.postcode,
        orgId: regular.requireChange
      }
    }
  },
  watch: {
    'item.provinceCode'(newd) {
      if (!this.canChangeProCode) {
        return false
      }
      this.item.cityCode = '';
      this.item.countyCode = '';
      this.citys = this.cityList.filter(v => v.parentCode === newd)
      this.countys = []
      let result = this.provinceList.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.provinceName = result[0].areaName
      }
    },
    'item.cityCode'(newd) {
      if (!this.canChangeProCode) {
        return false
      }
      this.item.countyCode = '';
      this.countys = this.countyList.filter(v => v.parentCode === newd)
      let result = this.citys.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.cityName = result[0].areaName
      }
    },
    'item.countyCode'(newd) {
      const result = this.countys.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.countyName = result[0].areaName
      }
    }
  },
  mounted() {
    this.$post({
      url: !this.editor
        ? mmUrl.enterprise.loadEditor
        : mmUrl.enterprise.loadCreate,
      data: {
        id: !this.editor ? this.$props.id : ''
      }
    }).then(res => {
      this.provinceList = res.areas.provinces
      this.countyList = res.areas.countys
      this.cityList = res.areas.citys
      this.treeData = res.orgs
      this.dics = res.dics
      this.loading = false
      this.createDicsObj = createDics(res.dics, 'dicCode')
      if (!this.editor) {
        res.item.years = res.item.years ? res.item.years.toString() : '';
        this.canChangeProCode = false
        this.item = res.item
        this.loading = false
        this.dics = res.dics
        reducerArr1(res.orgs)
        this.citys = this.cityList.filter(
          v => res.item.provinceCode === v.parentCode
        )
        this.countys = this.countyList.filter(
          v => res.item.cityCode === v.parentCode
        )
        this.$set(
          this.item,
          'orgName',
          resultArr.filter(v => v.id === res.item.orgId)[0].orgName
        )
      }
    })
  },
  methods: {
    changeProCode() {
      this.canChangeProCode = true
    },
    emitData(res) {
      this.$set(this.item, 'orgId', res.id)
      this.$set(this.item, 'orgName', res.orgName)
    },
    submitForm() {
      this.$refs['item'].validate(valid => {
        if (valid) {
          this.$post({
            url: !this.editor
              ? mmUrl.enterprise.editor
              : mmUrl.enterprise.create,
            data: {
              item: this.item
            }
          })
            .then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$emit('closeDialog')
            })
            .catch(() => {})
        }
      })
    },
    changeIndustry(e) {
      this.item.industry = e
    }
  }
}
</script>

<style lang="scss" scoped>
.select {
  width: 140px;
  margin-right: 5px;
}
</style>
